<template>
    <div>

        <div class="container">
            <div class="nav">
                <div>
                <a href="javascript:;" @click="$router.back()"></a>
                </div>
                <div>
                    <span>投诉中心</span>
                </div>
                <div @click="subnav = !subnav">
                    <i>&nbsp;&nbsp;&nbsp;&nbsp;</i>
                    <div class="subnav" v-show="subnav">
                        <router-link to="/" tag="a">首页</router-link>
                        <router-link to="/news" tag="a">资讯</router-link>
                        <router-link to="/video" tag="a">视频</router-link>
                        <router-link to="/seek" tag="a">找车</router-link>
                        <router-link to="/plaint" tag="a">汽车投诉</router-link>
                    </div>
                </div>
            </div>
           <div class="form">
            <ul>
                <li>
                    <div>
                        <span>车主姓名</span>
                        <div>
                            <input type="text" placeholder="请填写姓名" v-model="name">
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <span>手机号码</span>
                        <div>
                            <input type="text" placeholder="请输入手机号查询" v-model="phone">
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <span>图形码</span>
                        <div class="form_wrap">
                            <input type="text" placeholder="请输入图形码" v-model="graph">
                            <img src="../assets/img/2mfx.jpg" alt="">
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <span>验证码</span>
                        <div class="form_wrap">
                            <input type="text" placeholder="请输入验证码" v-model="vcode">
                            <a href="javascript:;" @click="getCode">获取短信验证码</a>
                        </div>
                    </div>
                </li>
            </ul>
            <p>验证后将自动把绑定账号，查看投诉最新进展、网友回帖</p>
           </div>
            <div class="next" @click="next">
                <span>下一步 填写车辆信息</span>
            </div>
            <div class="cross"></div>
            <div class="footer">
                <p>您的投诉建议</p>
                <p>Copyright©2019 汽车消费网 315che.com</p>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            name:"",
            phone:"",
            graph:"",
            vcode:"",
            formId:false,
            subnav: false
        }
    },
    created() {
        this.$emit("car-show", false);
    },
    methods: {
        fun() {
            this.$refs.inp.click();
        },
        getCode(){
            let phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            let graph = "2mfx";
            if(this.name == ""){
                this.$toast("请输入名字")
            } else if (phone.test(this.phone) == false){
                this.$toast("手机号码格式错误！")
            }else if(this.graph != graph){
                this.$toast("图形码错误")
            }else{
                this.formId = true;
                this.$toast("验证码：6666");
            }
            
        },
        next(){
            if(!this.formId){
                this.$toast("请输入完整信息");
            }else{
                this.$router.push("/plaintCon")
            }
        }
    }
}
</script>

<style lang="scss" scoped>
input::placeholder{
    color: #999;
}
.nav {
    height: 44px;
    background-color: #2070e0;
    display: flex;
    align-items: center;

    &>div {
        &:nth-child(1) {
            text-align: left;
            flex: 1;
        }

        &:nth-child(2) {
            text-align: center;
            flex: 1;
        }

        &:nth-child(3) {
            text-align: right;
            flex: 1;
            position: relative;
            
                i {
                    display: block;
                    float: right;
            
                }
            .subnav {
                    width: 100px;
                    height: 170px;
                    padding: 6px;
                    border-radius: 4px;
                    position: absolute;
                    top: 35px;
                    left: 12px;
                    background: rgba(0, 0, 0, 0.8);
                    z-index: 9;
            
                    a {
                        width: 100px;
                        height: 18px;
                        padding: 8px 0;
                        text-align: center;
                        background-image: none;
                        color: #fff;
                    }
            
                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        top: -17px;
                        left: 80px;
                        border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
                        border-width: 9px;
                        border-style: dashed dashed solid dashed;
                    }
                }
        }
    }

    div {
        a {
            display: block;
            width: 40px;
            height: 40px;
            background-image: url("../assets/img/icons1.png");
            background-position: -82px -32px;
            background-size: 400px auto;
        }

        span {
            color: #fff;
            font-size: 16px;
        }

        i {
            width: 15px;
            height: 18px;
            background-image: url("../assets/img/m-icons.png");
            background-position: -211px 0px;
            background-size: 300px auto;
            margin-right: 15px;
        }
    }
}
.form{
    padding: 30px 25px;
    ul{
        li{
            padding: 14px 0;
            border-bottom: 1px solid #e6e6e6;
            &>div{

                display: flex;
                color: #333;
                span{
                    font-size: 16px;
                    width: 30%;
                    text-align: left;
                }
                div{
                    width: 70%;
                    display: flex;
                    input{
                        height: 20px;
                        border: .8px;
                    }
                    img{
                        width: 125px;
                        height: 30px;
                    }
                }
                .form_wrap{
                    input{
                        width: 96px;
                        padding: 3px 7px;
                    }
                    a{
                        display: block;
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        border-radius: 4px;
                        background-color: #2565cd;
                        color:#fff;
                        font-size: 14px;
                        margin-left: 19px;
                        text-align: center;
                    }
                }
            }
        }
    }
    p{
        font-size: 12px;
        color: #999;
        text-align: center;
        padding-top: 25px;
    }
}
.next {
    padding: 30px 20px;

    span {
        display: block;
        width: 100%;
        background-color: #2070e0;
        border-radius: 20px;
        font-size: 18px;
        text-align: center;
        line-height: 45px;
        height: 45px;
        color: #fff;
    }
}

.footer {
    height: 44px;
    padding: 25px 20px;
    padding-bottom: 75px;

    p {
        color: #333;
        font-size: 14px;
        text-align: center;

        &:first-of-type {
            padding-bottom: 10px;

            &::before {
                display: inline-block;
                width: 18px;
                height: 14px;
                content: "";
                background-image: url("../assets/img/m-icons.png");
                background-position: -601px 0px;
                background-size: 230px auto;
                margin-right: 3px;
            }
        }
    }
}
</style>